<template>
	<view>
		<view class="inp">
					<u--form
							labelPosition="left"
							labelWidth=70px
							:model="model1"
							:rules="rules"
							ref="form1"
							
							
					>
						<u-form-item label="微信昵称" prop="userInfo.name" borderBottom ref="item1">
							<u--input
									 placeholder="获取微信昵称"
									v-model="model1.userInfo.name"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item label="真实姓名" prop="userInfo.truename" borderBottom ref="item1">
							<u--input
									 placeholder="输入姓名"
									v-model="model1.userInfo.truename"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item label="我的手机" prop="userInfo.phone" borderBottom ref="item1">
							<u--input
									 placeholder="输入手机号"
									v-model="model1.userInfo.phone"
									border="none"
							></u--input>
						</u-form-item>
					
					<u-form-item  label="收货地址" prop="userInfo.address" borderBottom ref="item1">
					<view class="container">
						<view class="information_input" @click="openAddres2">
							<u--input class="input" placeholder="省" v-model="model1.userInfo.value" suffixIcon="arrow-down"></u--input>
							<u--input class="input" placeholder="市" v-model="model1.userInfo.value1" suffixIcon="arrow-down"
								suffixIconStyle="color: #909399"></u--input>
							<u--input class="input" placeholder="县" v-model="model1.userInfo.value2" suffixIcon="arrow-down"
								suffixIconStyle="color: #909399"></u--input>
						</view>
									<simple-address  mask-bg-color="rgba(0, 0, 0, 0.4)" ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="purple"></simple-address>
						</view>
						<u--input
								 placeholder="输入详细地址"
								v-model="model1.userInfo.address"
								border="none"
						></u--input>
						</u-form-item>
					</u--form>
					
		</view>
		<view class="button">
			<u-toast ref="uToast"></u-toast>
				<u-button type="success" @click='preservation'> {{btn}}</u-button>
		</view>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
	
		data() {
			
			return {
				btn:'保存',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
			model1: {
				userInfo: {
					name: '',
					phone:'',
					truename:'',
					address:'',
					value:'',
					value1:'',
					value2:''
				},			
			},
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写微信昵称',
					trigger: ['blur', 'change']
				},	
				'userInfo.phone': {
					type: 'number',
					required: true,
					message: '请填写手机号码',
					trigger: ['blur', 'change']
				},	
				'userInfo.truename': {
					type: 'string',
					required: true,
					message: '请填写真实名字',
					trigger: ['blur', 'change']
				},
				'userInfo.address': {
					type: 'string',
					required: true,
					message: '请填写详细地址',
					trigger: ['blur', 'change']
				}
			},
		
		 }
		},
		created() {
			this.$api.getpsxsonal().then(res=>{
				console.log(res.data.slice(-1)[0] )
				this.model1.userInfo=res.data.slice(-1)[0]
				console.log(this.model1.userInfo)
				if(this.model1.userInfo!==''){
					this.btn='修改'
				}
			})
			
		},
		components: {
			        simpleAddress
			    },
		methods: {
			 // openAddres() {
				//             this.cityPickerValueDefault = [0,0,1]
				//             this.$refs.simpleAddress.open();
				//         },
				        openAddres2() {
				            // 根据 label 获取
				            var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
				            console.log(index.data);
				            this.cityPickerValueDefault = index.index;
							// console.log(this.cityPickerValueDefault)
				            this.$refs.simpleAddress.open();
				        },
				        // openAddres3() {
				        //     // 根据value 获取
				        //     var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
				        //     console.log(index);
				        //     this.cityPickerValueDefault = index.index;
				        //     this.$refs.simpleAddress.open();
				        // },
				        onConfirm(e) {
				            // this.pickerText = JSON.stringify(e); //这个步骤只是为了让大家看到返回的数据
				            this.pickerText = e.label.split('-');   //获取具体的值
							this.model1.userInfo.value= this.pickerText[0]
							this.model1.userInfo.value1= this.pickerText[1]
							this.model1.userInfo.value2= this.pickerText[2]
							console.log(this.model1.userInfo.value)
				        },

			
			
			preservation(){
				console.log(this.model1.userInfo)
				if(this.model1.userInfo.name==''||this.model1.userInfo.value==''||this.model1.userInfo.address==''||this.model1.userInfo.phone==''||this.model1.userInfo.truename==''){
				this.$refs.uToast.show({
					type: 'error',
					message: "请填写完整数据哦！！",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				})
				}else{
					this.$api.addpsxsonal(this.model1.userInfo).then(res=>{
						this.$refs.uToast.show({
							type: 'success',
							message: "发布成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						uni.navigateTo({
							url: '/pages/person/person'
						})
						console.log(res)
					})
				}
				
			},
			
		}
	}
</script>

<style>
 .inp{
	 width: 90%;
	 margin: 30upx auto;
	 
 }
/deep/.u-form-item__body__right__content__slot{
	flex-direction: column;
	flex-wrap: wrap
}
.container select{
	width: 30%;
}
.button{
	width:85%;
	margin: 100upx auto;
}
.information_input{
	display: flex;
	flex-wrap: wrap;
}
</style>
